<template>
  <div class="font-bold">添加评估项</div>
  <div class="evaluation-system-content">
    <el-form :model="formState" :rules="formRules" ref="formRef">
      <el-table :data="data" border>
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column property="bigCategorization" label="大分类" width="150" align="center">
          <template #default="">
            <el-form-item label="" prop="bigCategorization">
              <el-input v-model="formState.bigCategorization" type="textarea" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column property="smallCategorization" label="小分类" width="150" align="center">
          <template #default="">
            <el-form-item label="" prop="smallCategorization">
              <el-input v-model="formState.smallCategorization" type="textarea" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column property="evaluationProject" label="评估项" align="center">
          <template #default="">
            <el-form-item label="" prop="evaluationProject">
              <el-input v-model="formState.evaluationProject" type="textarea" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column property="maximumAmount" label="上限金额（元）" width="160" align="center">
          <template #default="">
            <el-form-item label="" prop="maximumAmount">
              <el-input v-model="formState.maximumAmount" type="textarea" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column property="maximumPeriod" label="上限期限" width="120" align="center">
          <template #default="">
            <el-form-item label="" prop="maximumPeriod">
              <el-select v-model="formState.maximumPeriod">
                <el-option :value="0" label="不存在上限期限" />
                <el-option :value="1" label="每年" />
                <el-option :value="2" label="每周期" />
                <el-option :value="3" label="一次性" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column property="effectiveTime" label="生效时间" width="320" align="center">
          <template #default="">
            <div class="flex items-center gap-1">
              <div class="flex-none !w-60px">
                <el-form-item label="" prop="timeUnit">
                  <el-select v-model="formState.timeUnit">
                    <el-option :value="1" label="年" />
                    <el-option :value="2" label="月" />
                    <el-option :value="3" label="日" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="flex-auto">
                <el-form-item label="" prop="effectiveTime">
                  <el-date-picker
                    v-model="formState.effectiveTime"
                    type="yearrange"
                    v-if="formState.timeUnit == 1"
                    style="width: 100%"
                  />
                  <el-date-picker
                    v-model="formState.effectiveTime"
                    type="monthrange"
                    v-else-if="formState.timeUnit == 2"
                    style="width: 100%"
                  />
                  <el-date-picker
                    v-model="formState.effectiveTime"
                    type="daterange"
                    v-else-if="formState.timeUnit == 3"
                    style="width: 100%"
                  />
                </el-form-item>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="scoreType" label="系统评分" width="160" align="center">
          <template #default="">
            <el-form-item label="" prop="scoreType">
              <el-input v-model="formState.scoreType" type="textarea" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus'
import { reactive } from 'vue'

const formRef = ref<FormInstance>()
const formState = reactive({
  bigCategorization: '',
  smallCategorization: '',
  evaluationProject: '',
  maximumAmount: '',
  maximumPeriod: 1,
  effectiveTime: '',
  expireTime: '',
  timeUnit: 1,
  scoreType: ''
})
const formRules = reactive({
  bigCategorization: [{ required: true, message: '请输入大分类' }],
  smallCategorization: [{ required: true, message: '请输入小分类' }],
  evaluationProject: [{ required: true, message: '请输入评估项' }],
  maximumAmount: [{ required: true, message: '请输入上限金额' }],
  maximumPeriod: [{ required: true, message: '请输入上限期限' }],
  effectiveTime: [{ required: true, message: '请选择生效时间' }],
  expireTime: [{ required: true, message: '请选择失效时间' }],
  timeUnit: [{ required: true, message: '请选择单位' }],
  scoreType: [{ required: true, message: '请输入系统评分' }]
})

const data = reactive<any[]>([formState])

defineExpose({
  form: formRef,
  state: formState
})
</script>

<style>
.evaluation-system-content .el-select,
.evaluation-system-content .el-input,
.evaluation-system-content .el-textarea,
.evaluation-system-content .el-date-editor {
  height: 100px !important;
}

.evaluation-system-content .el-select .el-select__wrapper,
.evaluation-system-content .el-input .el-input__wrapper,
.evaluation-system-content .el-textarea .el-textarea__inner {
  height: 100%;
}
</style>
